<template>
	<div>

		<el-dialog :modal="false" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
		 v-dialogDrag :visible.sync="dialogFormVisible">
			<el-form :inline="true" :model="formInline" @submit.native.prevent class="form-inline form-menu-list">
				<el-form-item>
					<el-input v-model="formInline.title" placeholder="请输入查询内容" @keyup.enter.native="onSearch"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSearch">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
				<!-- <el-table-column type="selection" width="55">
				</el-table-column> -->
				<el-table-column prop="id" label="序号" width="80">
				</el-table-column>
				<el-table-column prop="title" label="标题" width="450">
				</el-table-column>
				<el-table-column label="操 作" width="300">
					<template slot-scope="scope">
						<el-button size="medium" icon="el-icon-edit" type="primary" @click="relate(scope.$index, scope.row)">关联</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px">
				<!-- <el-button type="primary" @click="mutilrelate()">批量关联</el-button> -->
				<!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
				<el-button @click="close()">关 闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		search,related,unrelated
	} from '@/api/wiki.js'
	export default {
		props: {
			dialogFormVisible: Boolean,
			serviceId: Number,
			appType: String,
		},
		
		data() {
			return {
				tableData: [],
				multipleSelection: [],
				formInline: {
					related: "list",
					appid: this.serviceId,
					apptype: this.appType,
				},
			}
		},
		methods: {
			async onSearch() {
				await search(this.formInline, this.pageSize, this.currentPage)
					.then((response) => {
						this.inittable(response)
					})
			},
			inittable(response) {
				this.tableData = response.items;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			async relate(index, row) {
				
				let data = {
					id: row.id
				}
				await related(data,this.serviceId,this.appType)
				.then((response) => {
					if(response.code == "200"){
						this.$message({
							type: 'success',
							message: '关联成功!'
						});
					}
				})
			},
			close() {
				this.$emit('update:dialogFormVisible', false)
				this.$emit('update:dialogFormVisible', false)
			}

		},
		created() {
			this.onSearch();
		}
	}
</script>

<style>
</style>
